<template>
	<div class="pub-main">
		<sy-header></sy-header>
		<div class="cont mt10">
			<el-col :span="24" class="section-1">
				<!-- <el-image src="/static/image/index/section_1.png" class="img"></el-image> -->
				<div class="section-title">
					<div class="title">团结奋斗 . 创新拼搏</div>
					<div class="tips">——————————————— UNITY INNOVATION AND STRUGGLE ———————————————</div>
				</div>
			</el-col>
			<el-col :span="24" class="section-4">
				<div class="comp-main">
					<div class="comp-title">
						<div class="title">公司简介</div>
						<i class="bot"></i>
					</div>
					<div class="cont">
						北京永恒信业教育科技有限公司简称永恒教，是一家多年来致力于智慧教育的高新技术企业，公司核心团队具有多年教育行业经验和深厚的技术开发背景，可持续不断为用户提供优质、前沿的教育产品和信息化方案。
					</div>
					<div class="cont">
						在教育信息化 2.0
						背景下，公司开发了智慧教室数据采集与管理系统、云智能物联管控与运维管理系统、云课堂智慧教学系统、远程互动教学系统、智慧教室音视频发布与管理系统，得到了业界的认可和用户的好评。公司推出的智慧教室系统解决方案、家校共育解决方案、斯特姆航空航天创客解决方案，已为众多学校服务，入选中国教育技术协会智慧校园应用好方案。
					</div>
					<div class="cont">
						持之以恒，诚信服务是我们对客户和合作伙伴的承诺！团结奋斗、创新拼搏、永葆创业热情，为用户做出更有价值的产品和服务是我们永远的追求！
					</div>
				</div>
				<div class="comp-btm"></div>
			</el-col>
			<el-col :span="24" class="section-2" style="background-color: #f8f9fd;">
				<div class="comp-title">
					<div class="title">行业优势</div>
					<i class="bot"></i>
				</div>
				<el-col :span="24" class="section-main">
					<div class="left">
						<el-image src="/static/image/index/about_ys.png"></el-image>
					</div>
					<div class="right" style="background-color: #f0f1f9;">
						<div class="main-cont">
							<div class="cont-list">
								<i class="el-icon-caret-right"></i>
								<span>十年以上教育教学及信息化背景，有丰富的教育行业经验</span>
							</div>
							<div class="cont-list">
								<i class="el-icon-caret-right"></i>
								<span>自主开发的智慧教室云平台、智慧教学及智能管理系统，有完<br />全自主的知识产权，自主品牌、技术可控，处于行业领先地位</span>
							</div>
							<div class="cont-list">
								<i class="el-icon-caret-right"></i>
								<span>有丰富多样的课程资源体系及诸多专家名师合作</span>
							</div>
						</div>
					</div>
				</el-col>
			</el-col>
			<el-col :span="24" class="section-2">
				<div class="comp-title">
					<div class="title">我们的团队</div>
					<i class="bot"></i>
				</div>
				<el-col :span="24" class="item">
					<div class="list" v-for="(item,index) in content" :key="index">
						<el-image :src="item.src" class="img"></el-image>
						<p class="title">{{item.title}}</p>
						<p class="content">{{item.cont}}</p>
					</div>
				</el-col>
			</el-col>
			<el-col :span="24" class="section-2">
				<el-col :span="24" class="item" style="background-color: #f8f9fd;">
					<div class="list" v-for="(item,index) in kfList" :key="index" style="background-color: #fff;width: auto;margin-right: 66px;">
						<el-image :src="item.src" class="img"></el-image>
						<p class="content" style="padding: 10px 0;">{{item.title}}</p>
						<p class="title" style="padding:0;">{{item.cont}}</p>
					</div>
				</el-col>
			</el-col>
			<footer-view></footer-view>
			<!-- <iframe src="http://www.yhkjedu.com/about1.html" width="100%" height="100%" frameborder="0"></iframe> -->
		</div>
	</div>
</template>

	<script>
		import footerView from './compoents/footer.vue';
		export default {
			components:{footerView},
			data() {
				return {
					content: [{
							src: '/static/image/index/about_11.png',
							title: '年轻化',
							cont: '执行团队30岁以下占比75%，创新拼搏，永葆创业热情'
						},
						{
							src: '/static/image/index/about_12.png',
							title: '专业化',
							cont: '具备高等教育学历人员高达90%，管理层团队与研发团队专业能力突出'
						},
						{
							src: '/static/image/index/about_13.png',
							title: '职业化',
							cont: '以任职资格为牵引，搭建员工职业化发展通道'
						}
					],
					kfList:[{
							src: '/static/image/index/icon_tel.png',
							title: '电话',
							cont: '010-62698511'
						},
						{
							src: '/static/image/index/icon_phone.png',
							title: '手机',
							cont: '13911757666'
						},
						{
							src: '/static/image/index/icon_qq.png',
							title: 'QQ',
							cont: '749921801'
						}]
				}
			},
			methods: {}
		}
	</script>

<style lang="scss" scoped>
	.cont {
		padding: 0;
		margin: 0;
		height: calc(100% - 60px);
		overflow-y: auto;

		.section-1 {
			height: 480px;
			background: url(../../../static/image/index/about_bg1.png) no-repeat top;
			background-size: cover;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			.section-title {
				width: 709px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.title {
					font-size: 75px;
					color: #fff;
				}

				.tips {
					font-size: 14px;
					color: #fff;
				}
			}
		}

		.section-2,
		.section-3 {
			padding: 55px 0;

			.section-top {
				position: relative;
				margin: 0 auto;
				width: 180px;

				h3 {
					width: 100%;
					text-align: center;
					font-size: 28px;
					padding-bottom: 30px;
					z-index: 1222;
				}

				.img {
					position: absolute;
					top: -43px;
					right: -53px;

					&>>>img {
						z-index: 0;
					}
				}
			}

			// section 1
			.item {
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #fff;

				.list {
					cursor: default;
					margin-right: 20px;
					box-sizing: border-box;
					padding: 0 50px;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 330px;
					height: 270px;
					// background-color: #f0f1f9;
					border-radius: 5px;

					.img {
						width: 100px;
						height: 100px;
					}

					.title {
						padding: 10px 0;
						font-size: 20px;
						font-weight: bold;
						color: #2e323e;
					}

					.content {
						font-size: 14px;
						color: #5f6573;
					}
				}
			}

			// section 2
			.section-main {
				display: flex;

				.left {
					flex: 1;
					.el-image{
						width: 100%;
					}
				}

				.right {
					flex: 1;

					.main-cont {
						box-sizing: border-box;
						height: 100%;
						padding-left: 60px;
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						align-content: flex-start;
						justify-content: center;

						.cont-list {
							padding: 20px 0;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							i {
								font-size: 25px;
								color: #ff9b25;
							}
							span{
								font-weight: 400;
								font-size: 18px;
								color: #2e323e;
							}
						}
					}
				}
			}
		}
	}

	// 公司简介
	.section-4 {
		position: relative;
		height: 584px;
		background-color: #f8f9fd;

		.comp-main {
			box-sizing: border-box;
			padding: 40px 60px 60px;
			position: absolute;
			top: -30px;
			left: 50%;
			transform: translate(-50%,-30px);
			width: 1190px;
			background-color: #fff;
			z-index:100;

			.cont {
				text-indent: 36px;
				line-height: 40px;
				color: #454545;
				font-size: 18px;
			}
		}
		.comp-btm {
			margin-left:10px;
			position: absolute;
			top: -25px;
			left: 50%;
			transform: translate(-50%,-25px);
			width: 1190px;
			height: 481px;
			background-color: #5b90ff;
			z-index: 1;
		}
	}
	
	
	.comp-title {
		margin: 0 auto 60px;
		width: 150px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.title {
			font-size: 24px;
			color: #5b90ff;
		}
	
		i {
			display: block;
			width: 51px;
			height: 5px;
			background-color: #4f555a;
		}
	}

</style>
